<template>
	<view class="page-content" >
		<u-sticky bgColor="#fff">
			<u-navbar :is-back="false"  title="湖北移动网络运营看板-故障"  :background="background" title-color="#000" :border-bottom="true">
			</u-navbar>
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#1B9CFF" inactive-color="#A7ABBB" @change="change"></u-tabs>
		</u-sticky>
		<!-- 管理员 -->
		<template>
			<Tab1-admin v-if="current == 0" ref="tab1AdminRef" :permissionData="permissionData"/>
			<Tab2-admin v-if="current == 1" ref="tab2AdminRef" :permissionData="permissionData"/>
		</template>
	</view>
</template>

<script>
	
	import $ from 'common/utils/jquery-3.5.1.min.js'
	import Tab1Admin from "./components/Tab1.vue"
	import Tab2Admin from "./components/Tab2.vue"
	export default {
		components: {
			Tab1Admin,
			Tab2Admin,
		},
		watch: {
		    '$route'(to, from) {
				if(from.path == '/pagesJK/faultPage/components/Tab1Details1' || from.path == '/pagesJK/details/zhuanqu1'){
					return 
				}
		      if (to.path === '/pagesJK/faultPage/index') {
				    this.$nextTick(() => {
						uni.pageScrollTo({
						  scrollTop: 0, // 滚动到目标元素的位置
						  duration: 0 // 滚动动画持续时间，单位ms
						});
						this.initializePage();
					});
		      }
		    }
		  },
		data() {
			return {
				list: [],
				current: 0,
				permissionData:'',
				background: {
					backgroundColor: '#fff'
				},
			}
		},
		mounted() {
			this.list = [{
				name: '全网故障情况'
			}, {
				name: '重点关注故障'
			}]
			this.initializePage();
		},
		methods: {
		    scrollToElementInTab1(elementId) {
				if (this.$refs.tab1AdminRef) {
				  this.$refs.tab1AdminRef.scrollToElement(elementId);
				}
		    },
			scrollToElementInTab2(elementId) {
				if (this.$refs.tab2AdminRef) {
				  this.$refs.tab2AdminRef.scrollToElement(elementId);
				}
			},
			initializePage(){
				  this.current = this.$route.query.current || 0
				  if(this.$route.query.to){
					  this.permissionData = this.$route.query.to
					  if(this.current == 0){
						    this.scrollToElementInTab1(this.$route.query.to)
					  }else{
						    this.scrollToElementInTab2(this.$route.query.to)
					  }
				  }else{
					  uni.pageScrollTo({
					    scrollTop: 0, // 滚动到目标元素的位置
					    duration: 0 // 滚动动画持续时间，单位ms
					  });
					  
				  }
			},
			change(index) {
				this.current = index;
				if(index == 0){
					this.$router.replace({
					    path:'/pagesJK/faultPage/index',query:{ 
						   to : '',
						   current: 0,
						},
					});
				}else
				if(index == 1){
					this.$router.replace({
					    path:'/pagesJK/faultPage/index',query:{ 
						   to : '',
						   current: 1,
						},
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-sticky{
		width: 100% !important;
	}
	.page-content {
	}
	/deep/ .u-navbar-content-title{
		width: 550rpx !important;
		left: 100rpx !important;
		right: 100rpx !important;
	}
</style>